1. 需求背景

2. 需求文档

3. 范围

4. 运营人员

5. 普通用户

6. 后台管理员

1. 模块设计

2. 模块拆分和关系图

1. 核心数据结构设计

2. 数据结构

{
    // 作品
    work: {
        title: '作品标题',
        setting: { /* 一些可能的配置项，用不到就先预留 */ },
        props: { /* 页面 body 的一些设置，如背景色 */ },
        components: [
            // components 要用数组，有序结构
            // 单个 node 要符合常见的 vnode 格式
            {
                id: 'xxx', // 每个组件都有 id ，不重复
                name: '文本1',
                tag: 'text',
                attrs: { fontSize: '20px' },
                children: [
                    '文本1' // 文本内容，有时候放在 children ，有时候放在 attrs 或者 props ，没有标准，看实际情况来确定
                ]
            },
            {
                id: 'yyy',
                name: '图片1',
                tag: 'image',
                attrs: { src: 'xxx.png', width: '100px' },
                children: null
            }
        ]
    },
    // 画布当前选中的组件
    activeComponentId: 'xxx'
}

• 数据流转关系图

1. 扩展性保证

2. 扩展组件

3. 扩展功能

4. 数据结构扩展

5. 引导讨论扩展性

6. 研发提效

7. 复用性

8. 易用性

9. 例：脚手架、组件平台

10. 运维保障

11. 线上服务和运维服务（采购第三方服务）

12. 安全

13. 监控和报警（自研）

14. 服务扩展性